<template>
  <div>
    <!-- 面包屑导航区域 -->
    <div class="bread_box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>文章列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <!-- 搜索与按钮区域 -->
      <el-form
        class="search_from"
        :model="searchForm"
        ref="searchFormRef"
        size="small"
        :inline="true"
        label-width="70px"
      >
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入文章标题"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="文章作者" prop="author">
          <el-input
            v-model="searchForm.author"
            placeholder="请输入作者名"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="searchArticle()"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetSearchForm()"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 文章列表区域 -->
      <el-table :data="blogList" border stripe>
            <el-table-column label="#" type="index"></el-table-column>
            <el-table-column label="编号" prop="bid"></el-table-column>
            <el-table-column label="标题" prop="title"></el-table-column>
            <el-table-column label="简介" prop="summary" :show-overflow-tooltip="true"></el-table-column>
            <el-table-column label="内容" prop="content" :show-overflow-tooltip="true" ></el-table-column>
            <el-table-column label="更新时间" prop="time" width="150"></el-table-column>
            <el-table-column label="作者id" prop="uid"></el-table-column>
            <el-table-column label="类目id" prop="cid"></el-table-column>
            <el-table-column label="作者笔名" prop="author"></el-table-column>
            <el-table-column label="操作" width="180px">
              <template slot-scope="scope">
                <!-- 修改按钮 -->
                <!-- <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.bid)"></el-button> -->
                <!-- 删除按钮 -->
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeBlogById(scope.row.bid)"></el-button>
              </template>
            </el-table-column>
          </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handleCurrentPageChange"
        :current-page="pageInfo.currentPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-pageSize="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 获取文章列表的参数对象
      pageInfo: {
        currentPage: 1, // 当前页
        pageSize: 10 // 页大小
      },
      // 搜索条件表单
      searchForm: {
        title: '', // 文章标题
        author: '' // 文章作者
      },
      // 文章列表
      blogList: [],
      total: 0,
      blogInfo: {}
    }
  },
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 30) {
        return value.slice(0, 30) + '...'
      }
      return value
    }
  },
  methods: {
    // 获取文章列表
    async getBlogList () {
      // const { data: res } = await this.$http.get('/blog/all.do', { params: this.pageInfo })
      const { data: res } = await this.$http.get('/blog/all.do', { params: this.pageInfo })
      console.log(res)
      // if (res.flag !== true) return this.$message.error('获取文章列表失败！')
      // 文章列表赋值
      this.blogList = res.data.rows
      this.total = res.data.total
    },
    // 根据搜索条件表单数据，查询文章列表
    async searchArticle () {
      if (this.searchForm.title.length === 0 && this.searchForm.author.length === 0) this.getBlogList()
      else this.getConditionList()
      // this.resetSearchForm()
    },
    // 展示编辑窗口
    // async showEditDialog(bid) {
    //   this.editDialogVisible = true
    //   const { data: res } = await this.$http.get('blog/selectById.do?uid=' + bid)
    //   if (res.flag !== true) {
    //     return this.$message.error('查询用户信息失败！')
    //   }
    //   this.editForm.username = res.data.username
    // },
    // 清空查询条件 searchForm 表单
    resetSearchForm () {
      this.$refs.searchFormRef.resetFields()
      // this.getBlogList()
    },
    async getConditionList () {
      const { data: res } = await this.$http.post('blog/search.do?title=' + this.searchForm.title + '&author=' + this.searchForm.author + '&currentPage=' + this.pageInfo.currentPage + '&pageSize=' + this.pageInfo.pageSize)
      this.blogList = res.data.rows
      this.total = res.data.total
    },
    // 监听 size 改变的事件
    handlePageSizeChange (newSize) {
      //   console.log(newSize)
      this.pageInfo.pageSize = newSize
      this.getBlogList()
      if (this.searchForm.title.length === 0 && this.searchForm.author.length === 0) this.getBlogList()
      else this.getConditionList()
    },
    // 监听 cur 页码值 改变的事件
    handleCurrentPageChange (newCur) {
      //   console.log(newCur)
      this.pageInfo.currentPage = newCur
      this.getBlogList()
      if (this.searchForm.title.length === 0 && this.searchForm.author.length === 0) this.getBlogList()
      else this.getConditionList()
    },
    // 根据文章id删除文章
    removeBlogById (bid) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(bid)
        const { data: res } = await this.$http.delete('/blog/delete.do?bid=' + bid)
        console.log(res)
        if (res.flag !== true) return this.$message.error('删除文章失败！')
        this.$message.success('删除文章成功！')
        this.getBlogList()
      })
    }
  },
  created () {
    this.getBlogList()
  }
}
</script>

<style lang="less" scoped>
</style>

<style lang="less" >
.articleDetailForm {
  .el-form-item {
    .el-form-item__label {
      font-weight: 700 !important;
      line-height: 16px !important;
    }
    .el-form-item__content {
      line-height: 16px !important;
    }
    .limit_content {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
    }
  }
}
</style>
